<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    <div id="app">
      <h1>{{title}}</h1>
      <input type="checkbox" v-model="allFlag" @input="setFlag" ref="af" />全选
      <ul>
        <li v-for="(val,idx) in list">
        <input type="checkbox" v-model="val.flag" />
        {{val.title}}
        -
        {{val.num}}
        <button @click="fn(idx)">+</button>
        </li>
      </ul>
      <p>总数量:{{sum}}</p>
    </div>
    <h1>{{title}}</h1>
	</body>
  <script src="https://cdn.jsdelivr.net/npm/vue" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    
    // console.log(typeof Vue);
    
    let vm = new Vue({
      el:"#app",
      data:{
        title:"hello VUE",
        list:[{
          title:"手机",
          num:4,
          flag:true
        },{
          title:"电脑",
          num:5,
          flag:false
        },{
          title:"冰箱",
          num:2,
          flag:true
        }]
      },
      methods:{
        fn(i){
          this.list[i].num++;
        },
        setFlag(){
          // console.log(this.$refs.af.checked)
          this.list.forEach(val=>{
            val.flag = this.$refs.af.checked
          })
        }
      },
      computed:{
        sum(){
          return this.list.reduce((start,val)=>{
            if(val.flag){
              return start += val.num;
            }else{
              return start;
            }
          },0)
        },
        allFlag(){
          return this.list.every(val=>val.flag);
        }
      }
    });
    
    // 配置对象内的属性,叫选项
    
  </script>
</html>
